<template>
  <mt-tab-container-item class="pageView" >
    <div class="headerBar">
      <span class="icon-category headbarMenu"></span>
      <div class="searchBar "> <span class="icon-search searchicon"></span><span class="searchText">搜索</span></div>
      <span class="icon-add headbarMenu"></span>
    </div>
    <div class="loopImage">
      <mt-swipe :auto="3000"  class="mint-swipe">
      <mt-swipe-item  >
      <img src="../assets/images/1.png" class="swipeImg"/>
      </mt-swipe-item>
      <mt-swipe-item>
      <img src="../assets/images/2.png" class="swipeImg"/>
      </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="toolCagetory">
      <div class="toolCol" @click="handleChange">
        <span class="icon-account toolimage"></span>
        <span class='tabText'>xxx</span>
      </div>

      <div class="toolCol">
        <span class="icon-account toolimage"></span>
        <span class='tabText'>xxx</span>
      </div>

      <div class="toolCol ">
        <span class="icon-account toolimage"></span>
        <span class='tabText'>xxx</span>
      </div>

      <div class="toolCol">
        <span class="icon-account toolimage"></span>
        <span class='tabText'>xxx</span>
      </div>
      <div class="toolCol">
        <span class="icon-account toolimage"></span>
        <span class='tabText'>xxx</span>
      </div>
      <div class="toolCol">
        <span class="icon-account toolimage"></span>
        <span class='tabText'>xxx</span>
      </div>
      <div class="toolCol">
        <span class="icon-account toolimage"></span>
        <span class='tabText'>xxx</span>
      </div>
      <div class="toolCol">
        <span class="icon-account toolimage"></span>
        <span class='tabText'>xxx</span>
      </div>
    </div>
    <!--<ul-->
      <!--v-infinite-scroll="loadMore"-->
      <!--infinite-scroll-disabled="loading"-->
      <!--infinite-scroll-distance="10">-->

        <!--<li v-for="item in list">{{ item }}</li>-->
    <!--</ul>-->
    <div class="productList">

      <div class="productShow">
        <ul >
          <li class="productImg">
            <img src="../assets/images/1.png" class="swipeImg"/>
          </li>
          <li class="productDesc">
            [为你推荐]冷压接线端子SV1.25-4S叉形预绝缘端头Y型U型铜鼻子压线鼻1000只
          </li>
          <li class="productInfo">
            <span class="productPrice">¥25.5</span>
            <span class="productNum">15人付款</span>
          </li>
        </ul>
        <div class="clearfloat" />
      </div>


      <div class="productShow">
        <ul >
          <li class="productImg">
            <img src="../assets/images/1.png" class="swipeImg"/>
          </li>
          <li class="productDesc">
            [为你推荐]冷压接线端子SV1.25-4S叉形预绝缘端头Y型U型铜鼻子压线鼻1000只
          </li>
          <li class="productInfo">
            <span class="productPrice">¥25.5</span>
            <span class="productNum">15人付款</span>
          </li>
        </ul>
        <div class="clearfloat" />
      </div>

      <div class="productShow">
        <ul >
          <li class="productImg">
            <img src="../assets/images/1.png" class="swipeImg"/>
          </li>
          <li class="productDesc">
            [为你推荐]冷压接线端子SV1.25-4S叉形预绝缘端头Y型U型铜鼻子压线鼻1000只
          </li>
          <li class="productInfo">
            <span class="productPrice">¥25.5</span>
            <span class="productNum">15人付款</span>
          </li>
        </ul>
        <div class="clearfloat" />
      </div>
    </div>

  </mt-tab-container-item>


</template>

<script>
  export default {
    data(){
      return {
        value: "",
        items: [{
          src:"1.png",
         // href: '../../../images/1.png',
          url: '../../images/1.png'
        }, {
          src:"2.png",
         // href: '../../../images/2.png',
          url: '../../assets/images/2.png'
        }],
        list:["1","2"]
      }
    },
    props: {

    },
    watch:{
    },
    mounted: function(){
      this.getPostRequest();
    },
    methods:{
      getPostRequest(){
        this.$api.post(this.$pathUrl.login, {
          "userName": "xxx"
        }, response => {
          if (response.status >= 200 && response.status < 300) {
            console.log(response.data);
          } else {
            console.log(response.message);
          }
        });
      },
      handleChange(){
          console.log("xxxxaaa");
          this.getPostRequest();
      },
      loadMore() {
        this.loading = true;
        setTimeout(() => {
          let last = this.list[this.list.length - 1];
          for (let i = 1; i <= 10; i++) {
            this.list.push(last + i);
          }
          this.loading = false;
        }, 2500);
      }
    }


  }



</script>

<style scoped>
  .headerBar{
    width: 100%;
    background:green;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.5rem 0rem 0.5rem 0rem;
    position: fixed;
    z-index: 99999;
  }
  .searchBar{
    background: #fff;
    width: 65%;
    border-radius: 0.8rem;
    padding: 0.4rem  0.5rem 0.3rem 0.7rem;
  }
  .headbarMenu{
    font-size: 1.5rem;
    color: #fff;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .searchicon{
    font-size: 0.5rem;
  }
  .searchText{
    margin-left: 0.3rem;
  }

  .pageView{
    overflow-y: scroll;
    height: 85vh;
    padding-bottom: 100px;
    overflow-x: hidden;
  }
  .mint-swipe{
    margin-top: 2.5rem;
    height: 7rem;
    width: 100%;
  }
  .swipeImg {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }


  .toolCagetory{
    margin-top: 0.5rem;
    color:  #666;
    font-size:1rem;
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-around;
    background: #fff;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem
  }

  .toolCol{
    width:25%;
    height:3rem;
    text-align: center;
  }

  .toolimage{
    display:block;padding-bottom:0.3rem;
  }

  .tabText{

  }

  .productList{
    /*margin-top: 0.5rem;*/
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-between;
  }

  .productShow{
    background: #fff;
    width: 49%;
    margin-top: 0.5rem;
  }
  .productImg{
    width: 100%;
    height:7rem;
    float: left;
  }

  .productDesc{
    float: left;
    padding: 0.5rem;
    line-height: 0.9rem;
    height: 1.2rem;
    /*text-overflow: ellipsis;*/
    overflow: hidden;





  }
  .productInfo{
    float: left;
    padding: 0.5rem;
    width: 100%;
  }

  .productPrice{
    float:left;
    color: green;

  }

  .productNum{
    text-align: right;
    float: right;
    margin-right: 0.8rem;
  }



  .mint-tab-container-wrap{
    min-height: 30rem;
  }

</style>
